// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Table, Form, Radio, Tree, Button, Popconfirm, Modal, Row, Col, Input, Select, Cascader, Icon, Checkbox, Tabs, DatePicker, message, Tag } from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './policyEditStyle.less'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
import moment from 'moment';
const FormItem = Form.Item
const { RangePicker } = DatePicker
const { Option } = Select;
const { TreeNode } = Tree
const { TextArea } = Input;
import classnames from 'classnames/bind';
import FlagBtn from 'widget/FlagBtn/FlagView'
let cx = classnames.bind(styles);

const policyEditView = function ({ dispatch, model, form }) {

    // 表单的子函数
    const { resetFields, getFieldDecorator, validateFields, setFieldsValue,validateFieldsAndScroll } = form
    // 取出model对象，命名空间
    const { modelObj, namespace, actionType } = model
    // modelObj.xxx获取model中状态机的值
    let {upObj,cityList, areaName,attributeList,areaList, biz, query,btnLoading } = modelObj
    const formItemLayoutPro = {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
    }

    //输入框改变时
    function inputChange(value,id) {
        for(var item of attributeList){
            for(var itemed of item.list){
                if(itemed.id == id){
                    itemed.defaultValue = value
                }
            }
        }
        dispatch({
        type: `${namespace}/updateStore`,
        payload: {attributeList}
        })
    }

      //区域改变时
  function inputAreaChange(value, name) {
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {
        upObj: {
          ...upObj,
          [name]: value,
        }
      }
    })
    if(name == 'areaId'){
        dispatch({
          type: `${namespace}/findByCity`,
          payload: {areaId:value}
        })
    }
  }

    function submit(){
        validateFieldsAndScroll((err) => {
            if (err) {
              return false
            } else {
              dispatch({
                type: `${namespace}/submit`,
                payload: {}
              })
            }
          })
      }

    return (
        <div className='public_listMain'>
            <div className={"functionButton"}>
                <Button disabled={actionType == 'check'} type='primary' onClick={e => submit()} loading={btnLoading}>提交</Button>
            </div>

            <CollapsiblePanels title="政策信息编辑" hideUpDownBtn={true} >
                <Row>
                    <div>基本信息</div>
                    <Col span={8}>
                        <FormItem label='区域'  {...formItemLayoutPro}>
                        {getFieldDecorator('areaId', {
                            rules: [{
                            required: true, whitespace: true, message: '请选择区域'
                            }],
                            initialValue: upObj.areaId
                        })(
                            <Select disabled={actionType == 'check'} placeholder='请选择区域' onChange={(e) => { inputAreaChange(e, 'areaId') }}>
                                {areaList == undefined ?null:areaList.map((item)=>{
                                return <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
                                })}
                            </Select>
                        )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <FormItem label='城市'  {...formItemLayoutPro}>
                        {getFieldDecorator('cityId', {
                            rules: [{
                            required: true, whitespace: true, message: '请选择城市'
                            }],
                            initialValue: upObj.cityId
                        })(
                            <Select disabled={actionType == 'check'} placeholder='请选择城市' onChange={(e) => { inputAreaChange(e, 'cityId') }}>
                            {cityList == undefined ?null:cityList.map((item)=>{
                                return <Select.Option key={item.cityid} value={item.cityid}>{item.city}</Select.Option>
                            })}
                            </Select>
                        )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <FormItem label='市场信号'  {...formItemLayoutPro}>
                        {getFieldDecorator('marketSignal', {
                            rules: [{
                            required: true, whitespace: true, message: '请选择市场信号'
                            }],
                            initialValue: upObj.marketSignal
                        })(
                            <Select disabled={actionType == 'check'} placeholder='请选择市场信号' onChange={(e) => { inputAreaChange(e, 'marketSignal') }}>
                                <Option value="宽松政策">宽松政策</Option>
                                <Option value="趋紧政策">趋紧政策</Option>
                                <Option value="中性政策">中性政策</Option>
                            </Select>
                        )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col className="col" span={8}>
                        <FormItem
                            {...formItemLayoutPro}
                            label="政策发布时间"
                            >
                            {getFieldDecorator('policyPublishTime', {
                                rules: [{
                                    required: true, message: '请选择政策发布时间'
                                }],
                                initialValue: upObj.policyPublishTime ? moment(upObj.policyPublishTime, 'YYYY-MM-DD') : null
                            })(
                                <DatePicker disabled={actionType == 'check'} format="YYYY-MM-DD" onChange={(e, val) => inputAreaChange(val, 'policyPublishTime')}  />
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                {attributeList == undefined ?null:attributeList.map((item,index)=>{
                    if(item.name=="限贷政策"){
                        return(<Col span={22} className={cx('policyEditMarginleft')} key={index}>
                        <div className={cx('policyEdit-RowMargin')}>{item.name}</div>
                        <div className={cx('tabel-up')}>
                            { item.list.map((itemed,inx)=>{
                              if(itemed.attributeName == "政策详情"){
                                return (<div className={cx('tabel-th')} key={inx}>
                                            <div style={{height:'48px',lineHeight: '48px',background: '#f5f5f5',paddingLeft:'12px',borderRight: '1px solid #f5f5f5'}}>{itemed.attributeName}</div>
                                            <div style={{borderRight: '1px solid #f5f5f5'}}>
                                                <TextArea maxLength={400} style={{border: 'none'}} placeholder='请输入' rows={4} value={itemed.defaultValue} onChange={(e) => { inputChange(e.target.value, itemed.id) }}/>
                                            </div>
                                        </div>)
                                }else if(itemed.attributeName == "限贷"){
                                    return (<div className={cx('tabel-th')} key={inx}>
                                        <div style={{height:'48px',lineHeight: '48px',background: '#f5f5f5',paddingLeft:'12px',borderRight: '1px solid #f5f5f5'}}>{itemed.attributeName}</div>
                                        <div style={{borderRight: '1px solid #f5f5f5',position:'relative',height: '82px'}}>
                                            <Select  placeholder='请选择' value={itemed.defaultValue} style={{ width: 150 ,position:'absolute',transform: 'translate(-50%,-50%)',top: '50%',left: '50%'}} onChange={(e) => { inputChange(e, itemed.id) }}>
                                                <Option value="是">是</Option>
                                                <Option value="否">否</Option>
                                                <Option value="部分限贷">部分限贷</Option>
                                            </Select>
                                        </div>
                                    </div>)
                                }else{
                                    return (<div className={cx('tabel-th')} key={inx}>
                                        <div style={{height:'48px',lineHeight: '48px',background: '#f5f5f5',paddingLeft:'12px',borderRight: '1px solid #f5f5f5'}}>{itemed.attributeName}</div>
                                        <div style={{borderRight: '1px solid #f5f5f5'}}>
                                            <TextArea maxLength={400} style={{border: 'none'}} placeholder='请输入' rows={4} value={itemed.defaultValue} onChange={(e) => { inputChange(e.target.value.replace(/[^\-?\d.]/g,''), itemed.id) }}/>
                                        </div>
                                    </div>)
                                }
                            })}
                        </div>
                    </Col>)
                    }else if(item.name=="异动政策"){
                        return(<Col span={11} className={cx('policyEditMarginleft')} key={index}>
                        <div className={cx('policyEdit-RowMargin')}><span style={{color:'red'}}>*</span>{item.name}</div>
                        <div className={cx('tabel-up')}>
                            { item.list.map((itemed,inx)=>{
                                return (<div style={{width: '100%'}} className={cx('tabel-th')} key={inx}>
                                    <div style={{height:'48px',lineHeight: '48px',background: '#f5f5f5',paddingLeft:'12px',borderRight: '1px solid #f5f5f5'}}>详情</div>
                                    <div style={{borderRight: '1px solid #f5f5f5'}}>
                                        <TextArea maxLength={1000} style={{border: 'none'}} placeholder='请输入' rows={4} value={itemed.defaultValue} onChange={(e) => { inputChange(e.target.value, itemed.id) }}/>
                                    </div>
                                </div>)
                            })}
                        </div>
                        <div style={{color: 'red'}}>注：摘取填写每个政策的异动内容，该内容会更新到集团周报摘要，若无异动，则填写无</div>
                    </Col>)
                    }else{
                        return(<Col span={11} className={cx('policyEditMarginleft')} key={index}>
                        <div className={cx('policyEdit-RowMargin')}>{item.name}</div>
                        <div className={cx('tabel-up')}>
                            { item.list.map((itemed,inx)=>{
                                if(item.name=="其他政策"){
                                    return (<div style={{width: '100%'}} className={cx('tabel-th')} key={inx}>
                                        <div style={{height:'48px',lineHeight: '48px',background: '#f5f5f5',paddingLeft:'12px',borderRight: '1px solid #f5f5f5'}}>详情</div>
                                        <div style={{borderRight: '1px solid #f5f5f5'}}>
                                            <TextArea maxLength={600} style={{border: 'none'}} placeholder='请输入' rows={4} value={itemed.defaultValue} onChange={(e) => { inputChange(e.target.value, itemed.id) }}/>
                                        </div>
                                    </div>)
                                }else{
                                    if(itemed.attributeName == "政策详情"){
                                        return (<div className={cx('tabel-th')} style={{width:'70%'}} key={inx}>
                                                    <div style={{height:'48px',lineHeight: '48px',background: '#f5f5f5',paddingLeft:'12px',borderRight: '1px solid #f5f5f5'}}>{itemed.attributeName}</div>
                                                    <div style={{borderRight: '1px solid #f5f5f5'}}>
                                                        <TextArea maxLength={400} style={{border: 'none'}} placeholder='请输入' rows={4} value={itemed.defaultValue} onChange={(e) => { inputChange(e.target.value, itemed.id) }}/>
                                                    </div>
                                                </div>)
                                    }else{
                                        return (<div className={cx('tabel-th')} style={{width:'30%'}} key={inx}>
                                            <div style={{height:'48px',lineHeight: '48px',background: '#f5f5f5',paddingLeft:'12px',borderRight: '1px solid #f5f5f5'}}>{itemed.attributeName}</div>
                                            <div style={{borderRight: '1px solid #f5f5f5',position:'relative',height: '82px'}}>
                                                <Select  placeholder='请选择' value={itemed.defaultValue} style={{ width: 150 ,position:'absolute',transform: 'translate(-50%,-50%)',top: '50%',left: '50%'}} onChange={(e) => { inputChange(e, itemed.id) }}>
                                                    <Option value="是">是</Option>
                                                    <Option value="否">否</Option>
                                                    <Option value={"部分"+itemed.tableTab.split("政")[0]}>部分{itemed.tableTab.split("政")[0]}</Option>
                                                </Select>
                                            </div>
                                        </div>)
                                    }
                                }
                            })}
                        </div>
                    </Col>)
                    }
                 })}
                </Row>
            </CollapsiblePanels>
        </div>
    )
}


// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(policyEditView))